<!--
 * @Author: PeterZhang
 * @Date: 2020-08-15 20:13:47
 * @LastEditTime: 2020-08-16 18:13:16
 * @LastEditors: PeterZhang
 * @FilePath: \md_blog\src\components\Head.vue
 * @版权所述PetereZhang,作者保留最终开发者权限
-->
<template>
    <div class="header">
        <div class="row-12">
            <div class="cont flex">
                <div class="logo row-2 row-md-4 row-sm-6 row-xs-8 flex item-center" @click="goHome">
                    <img class="show" src="../assets/logo.png" alt="">
                    <p class="font-14 text-white">XXX的博客</p>
                </div>
                <div class="nav row-10 row-md-8 row-sm-6 row-xs-4 flex item-center just-end">
                    <ul class="flex item-center sm-hide">
                        <li class="font-14 text-white pad-10">文章分类</li>
                        <li class="font-14 text-white pad-10">我的简历</li>
                        <li class="font-14 text-white pad-10">日常生活</li>
                        <li class="font-14 text-white pad-10">我的项目</li>
                    </ul>
                    <button class="hide mobile sm-show row-sm-2 row-xs-5 pad-10">
                        <span class="show pt-2"></span>
                        <span class="show pt-2 mt-5"></span>
                        <span class="show pt-2 mt-5"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    created(){
        
    },
    methods:{
        goHome(){
            this.$router.push({
                path: '/'
            })
        }
    }
}
</script>

<style>

    .logo{
        cursor: pointer;
    }

    .header{
        background: #000;
    }

    .nav li{
        cursor: pointer;
    }

    .nav li:hover{
        color: #FDAB40;
    }

    .mobile{
        background: none;
        border: none;
    }
    
    .mobile span{
        background: #3466ae;
    }
    
    @media screen and (min-width:320px) {

        .logo img{
            width: 40px;
        }
    }
    
    @media screen and (min-width:768px) {

        .logo img{
            width: 55px;
        }
    }
    
    @media screen and (min-width:1024px) {

        .logo img{
            width: 75px;
        }
    }

</style>